<template>
    <div class="app-container">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="Delete"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['medicine:drug:remove']"
          >删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="Delete"
            :disabled="multiple"
            @click="handleOrder"
            v-hasPermi="['medicine:drug:remove']"
          >生成采购单</el-button>
        </el-col>
        <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
  
      <el-table v-loading="loading" :data="drugList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="药品ID" align="center" prop="drugId" />
        <el-table-column label="药片名称" align="center" prop="drugName" />
        <el-table-column label="药品编码" align="center" prop="drugCode" />
        <el-table-column label="药片关键字" align="center" prop="drugKeyword" />
        <el-table-column label="生产厂家ID" align="center" prop="factoryId" />
        <el-table-column label="采购数量" align="center" prop="cartDrugNum" >
            <template #default="scope">
                <el-input-number v-model="scope.row.cartDrugNum" min="1" size="small" @change="updateNum(scope.row)"/>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['medicine:drug:remove']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

          <!-- 生成采购对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="orderRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="供应商" prop="orderSupplier">
          <el-select v-model="form.supplierId" placeholder="请选择供应商">
            <el-option
              v-for="dict in supplier_info"
              :key="dict"
              :label="dict.supplierName"
              :value="dict.supplierId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    </div>
  </template>
  
  <script setup name="Drug">
  import { onMounted } from "vue";
  import { addOrder} from "@/api/his/order";
  import { listDrug, getDrug, delDrug, addDrug, updateDrug } from "@/api/his/drug";
  import { listSupplierAll } from "@/api/his/supplier";
  import { listCart,updateCartNum,deleteCartOption } from "@/api/his/orderCart";
  const { proxy } = getCurrentInstance();
  const { drug_type, drug_prescription,drug_unit,drug_status } = proxy.useDict('drug_type', 'drug_prescription','drug_unit','drug_status');
  const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
  const drugList = ref([]);
  const open = ref(false);
  const loading = ref(true);
  const showSearch = ref(true);
  const ids = ref([]);
  const single = ref(true);
  const multiple = ref(true);
  const total = ref(0);
  const title = ref("");
  const factoryList=ref([]);
  
  const data = reactive({
    form: {}
  });
  
  const { queryParams, form, rules } = toRefs(data);
  const supplier_info = ref([]);
  //异步加载供应商信息
listSupplierAll().then(res=>{
  supplier_info.value=res.rows
})
  //显示新增采购单的对话框
  function handleOrder(){
    reset();
    open.value = true;
    title.value = "创建采购单";
  }
  function reset() {
  form.value = {
    supplierId: null,
    remark: null
  };
  proxy.resetForm("orderRef");
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["orderRef"].validate(valid => {
    if (valid) {
      form.value.drugIds=ids.value;
        addOrder(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        }); 
    }
  });
}

  /** 查询采购列表 */
  function getList() {
    loading.value = true;
    listCart().then(res=>{
       drugList.value = res.data;
       loading.value = false;

    })
  }
  
// 取消按钮
function cancel() {
  open.value = false;
  reset();
}
  /** 搜索按钮操作 */
  function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
  }

  
  // 多选框选中数据
  function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.drugId);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
  }

  /** 删除采购项目操作 */
  function handleDelete(row) {
    const _drugIds = row.drugId || ids.value;
    proxy.$modal.confirm('是否确认删除药品信息编号为"' + _drugIds + '"的采购项？').then(function() {
      return deleteCartOption(_drugIds);
    }).then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    }).catch(() => {});
  }
//更新采购项的数量
function updateNum(row){
    updateCartNum(row.drugId, row.cartDrugNum).then(res=>{
        if(res.code ==200){
            proxy.$modal.msgSuccess("数量修改成功");
        }
    })
}

  
  getList();
  </script>
  